<template>
  <a-row justify="center" style="margin: 20px">
    <a-col :span="20">
      <a-card>
        <h1 class="center">{{ essay.title }}</h1>
        <h2 class="center">作者：{{ essay.author }}</h2>
        <a-typography-paragraph>
          <blockquote>文章介绍：{{ essay.description }}</blockquote>
        </a-typography-paragraph>
        <w-editor-info :content="essay.content"></w-editor-info>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import essayApi from "@/apis/essayApi";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { reactive } from "@vue/reactivity";
import WEditorInfo from '@/components/WEditorInfo';
export default {
  name: "UserEssayView",
  components:{
    WEditorInfo,
  }, 
  setup() {
    const router = useRoute();
    const userId = router.params.userId;

    const store = useStore();
    const access = store.state.user.info.access;

    let essay = reactive({
      id: "",
      title: "",
      author: "",
      support: "",
      content: "",
      description: "",
    });

    essayApi.getEssayById(userId, access).then((resp) => {
      essay.id = resp.data.essay.id;
      essay.title = resp.data.essay.title;
      essay.author = resp.data.essay.author;
      essay.support = resp.data.essay.support;
      essay.content = resp.data.essay.content;
      essay.description = resp.data.essay.description;
    });

    return {
      essay,
    };
  },
};
</script>

<style scoped>
.center {
  align-items: center;
  justify-content: center;
  display: flex;
}
</style>